<template>
  <div id="MainContentStatistics" class="mainContent">
    <div v-if="nursingLevelArr.length">
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <h2 class="informationTitle">
              <span>在科信息</span>
            </h2>
            <div class="row">
              <div class="col-sm-4 interval_768 boxright" >
                <div class="box-shadow Information">
                  <div class="informationImg">
                    <img
                      src="../../../../static/images/onIcu.png"
                      alt="Alternate Text"
                      class="padding_10"
                    />
                    <p>
                      在科人数：
                      <span>{{icuPatientArr.InIcuPatientCount}}</span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 interval_768 boxrightleft" >
                <div class="box-shadow Information">
                  <div class="informationImg">
                    <img
                      src="../../../../static/images/inIcu.png"
                      alt="Alternate Text"
                      class="padding_10"
                    />
                    <p>
                      今日入科：
                      <span>{{icuPatientArr.TodayInIcuCount}}</span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 interval_768 boxleft" >
                <div class="box-shadow Information">
                  <div class="informationImg">
                    <img
                      src="../../../../static/images/outIcu.png"
                      alt="Alternate Text"
                      class="padding_10"
                    />
                    <p>
                      今日出科：
                      <span>{{icuPatientArr.TodayOutIcuCount}}</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <h2 class="informationTitle">
              <span>质控信息</span>
            </h2>
            <div class="row">
              <div class="col-sm-4 interval_768 boxright" >
                <div class="box-shadow Information">
                  <div class="informationImg">
                    <img
                      src="../../../../static/images/score.png"
                      alt="Alternate Text"
                      class="padding_10"
                    />
                    <p>
                      评分≥15者：
                      <span>{{icuPatientArr.ApacheScoreCount}}</span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 interval_768 boxrightleft" >
                <div class="box-shadow Information">
                  <div class="informationImg">
                    <img
                      src="../../../../static/images/admitted.png"
                      alt="Alternate Text"
                      class="padding_10"
                    />
                    <p>
                      患者收治率：
                      <span>{{icuPatientArr.TreatmeRate}}</span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 interval_768 boxleft" >
                <div class="box-shadow Information">
                  <div class="informationImg">
                    <img
                      src="../../../../static/images/death.png"
                      alt="Alternate Text"
                      class="padding_10"
                    />
                    <p>
                      预计死亡率：
                      <span>6</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <!-- 病情分布 -->
          <div class="col-sm-6 interval_768">
            <div class="box-shadow box">
              <h2 class="title">病情分布</h2>
              <div class="row box-content">
                <div class="col-sm-6 interval_160" v-for="(item,index) in condition" :key="index">
                  <div class="pull-left conditionName interval_160">{{item.name}}</div>
                  <div class="pull-right conditionVal">{{item.value}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 患者情况统计 -->
          <div class="col-sm-6 interval_768">
            <div class="box-shadow box">
              <div class="row">
                <div class="age col-sm-6" v-if="ageArr.length">
                  <h2 class="title">年龄</h2>
                  <div class="echarts">
                    <pieEcharts :items="ageArr" :name="'年龄'"></pieEcharts>
                  </div>
                  <div class="statisticsName">
                    <div v-for="(item,index) in ageArr" :key="index">
                      <span>{{item.name}}</span> :
                      <span>{{item.value}}</span>
                    </div>
                  </div>
                </div>
                <div class="sex col-sm-6" v-if="sexArr.length">
                  <h2 class="title">患者性别</h2>
                  <div class="echarts">
                    <pieEcharts :items="sexArr" :name="'性别'"></pieEcharts>
                  </div>
                  <div class="statisticsName">
                    <div v-for="(item,index) in sexArr" :key="index">
                      <span>{{item.name}}</span> :
                      <span>{{item.value}}</span>
                    </div>
                  </div>
                </div>
                <div class="nursingLevel col-sm-6" v-if="nursingLevelArr.length">
                  <h2 class="title">费用</h2>
                  <div class="echarts">
                    <pieEcharts :items="nursingLevelArr" :name="'费用'"></pieEcharts>
                  </div>
                  <div class="statisticsName">
                    <div v-for="(item,index) in nursingLevelArr" :key="index">
                      <span>{{item.name | filterLevel}}</span> :
                      <span>{{item.value}}</span>
                    </div>
                  </div>
                </div>
                <div class="cost col-sm-6" v-if="costArr.length">
                  <h2 class="title">护理</h2>
                  <div class="echarts">
                    <pieEcharts :items="costArr" :name="'护理'"></pieEcharts>
                  </div>
                  <div class="statisticsName">
                    <div v-for="(item,index) in costArr" :key="index">
                      <span>{{item.name}}</span> :
                      <span>{{item.value}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <!--每月评分统计-->
          <div class="col-sm-6">
            <div class="box-shadow boxEcharts">
              <h2 class="title font-size_14">
                每月评分
                <vue-datepicker-local
                  format="YYYY-MM"
                  class="pull-right interval_160 interval_768"
                  v-model="emptyTime"
                  clearable
                />
              </h2>
              <div class="bar" v-if="bardata.length">
                <barEcharts :items="bardata"></barEcharts>
              </div>
              <div class="message" v-if="!bardata.length">当前没有数据！！！</div>
              <div class="statisticsScore">
                <div v-for="(item,index) in bardata" :key="index" class="pull-left">{{item.name}}</div>
              </div>
            </div>
          </div>
          <!--ICU患者收治率统计-->
          <div class="col-sm-6">
            <div class="box-shadow boxEcharts">
              <lineEcharts class="line"></lineEcharts>
            </div>
          </div>
        </div>
      </div>
    </div>
    <loading v-if="!nursingLevelArr.length"></loading>
  </div>
</template>
<script>
//import nursing from '@/components/echarts/nursingEcharts'
import barEcharts from "@/components/echarts/barEcharts";
import pieEcharts from "@/components/echarts/pieEcharts";
import lineEcharts from "@/components/echarts/lineEcharts";
import loading from "@/components/loading/loading"; //导入loading 组件
import VueDatepickerLocal from "@/components/datepicker/VueDatepickerLocal";
import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
import {
  apiPatientTypeStatisticList,
  apiPatientSicknessList,
  apiApacheScoreStatisticList,
  apiGetPatientInformationStatistic
} from "@/api/api";
export default {
  data() {
    return {
      ageArr: [],
      sexArr: [],
      costArr: [],
      nursingLevelArr: [],
      bardata: [],
      condition: [],
      apacheTime: "2018/12",
      icuName: JSON.parse(sessionStorage.getItem("user")).Content, //登录用户的科室
      icuPatientArr: {},
      emptyTime: ""
    };
  },
  watch: {
    icuName: {
      handler(curVal, oldVal) {
        //监听登陆人的科室有没改变，如果改变就执行下面的方法
        //console.log(curVal)  //新值
        $("#MainContentStatistics").scrollTop(0);
        this.nursingLevelArr = [];
        this.getPatientTypeStatisticList();
        this.getPatientSicknessList();
        this.getApacheScoreStatisticList();
        this.getPatientInformationStatistic();
      }
    },
    apacheTime: {
      handler(curVal, oldVal) {
        if (curVal == "") {
          this.apacheTime = "2018/12";
          this.getApacheScoreStatisticList();
        } else {
          this.getApacheScoreStatisticList();
        }
      }
    }
  },
  mounted() {
    this.getPatientTypeStatisticList();
    this.getPatientSicknessList();
    this.getApacheScoreStatisticList();
    this.getPatientInformationStatistic();
    Bus.$on("Content", e => {
      this.icuName = e.trim();
      //console.log(`传来的数据是：${e.trim()}`)
    });
    Bus.$on("timePicker", e => {
      this.apacheTime = e.trim();
    });
  },
  methods: {
    getPatientTypeStatisticList() {
      //获取在科患者各项统计数据
      apiPatientTypeStatisticList({
        icuName: this.icuName
      }).then(res => {
        if (res.Status == 1) {
          this.ageArr = res.Data.listAge;
          this.sexArr = res.Data.listGender;
          this.costArr = res.Data.listCost;
          this.nursingLevelArr = res.Data.listNursingLevel;
        }
      });
    },
    getPatientInformationStatistic() {
      //获取患者各项统计
      apiGetPatientInformationStatistic({
        icuName: this.icuName
      }).then(res => {
        // console.log(res);
        if (res.Status == 1) {
          this.icuPatientArr = res.Data;
          // 把获取到的总数传入公共媒介 js
          Bus.$emit("TotalCount", res.Data.InIcuPatientCount);
        }
      });
    },
    getPatientSicknessList() {
      //获取病情分布详情数据
      apiPatientSicknessList({
        icuName: this.icuName
      }).then(res => {
        if (res.Status == 1) {
          this.condition = res.Data;
        }
      });
    },
    getApacheScoreStatisticList() {
      //获取评分统计数据
      apiApacheScoreStatisticList({
        icuName: this.icuName,
        apacheTime: this.apacheTime
      }).then(res => {
        if (res.Status == 1) {
          this.bardata = res.Data;
        }
      });
    }
  },
  filters: {
    filterLevel(str) {
      if (!str) "";
      return str.substring(0, 2);
    }
  },
  components: {
    barEcharts,
    VueDatepickerLocal,
    pieEcharts,
    lineEcharts,
    loading
  }
};
</script>
<style scoped>
#MainContentStatistics {
  overflow-y: auto;
  padding: 10px 0 20px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
}

#MainContentStatistics .container {
  width: 100%;
  height: 100%;
  padding: 15px;
  padding: 15px 20px;
}
#MainContentStatistics .container:first-child {
  height: auto;
}
.box {
  height: 320px;
  padding: 10px 20px 0;
}
.informationImg {
  width: 100%;
  text-align: center;
}
.Information {
  display: flex;
  justify-content: center;
  align-items: center;
  /*padding:10px 0;*/
  min-height: 100px;
}
.box-shadow {
  box-shadow: 0 0 15px #ccc;
  border-radius: 10px;
}
.informationTitle {
  font-size: 17px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 15px;
}
.Information img {
  width: 40%;
  margin-bottom: 8px;
}
.informationTitle span {
  display: inline-block;
  padding: 0 8px;
  border-bottom: 2px solid #ddd;
}
.echarts {
  width: 120px;
}
.line {
  height: 300px;
}
.title {
  padding-left: 15px;
  line-height: 34px;
  font-size: 18px;
  color: #11a7f3;
  border-bottom: 1px solid #ddd;
  margin-top: 10px;
  margin-bottom: 10px;
}
.sex,
.age,
.cost,
.nursingLevel {
  position: relative;
}
.conditionName {
  max-width: calc(100% - 15px);
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box-content {
  height: 260px;
  padding-top: 5px;
  overflow-y: auto;
}
.conditionVal {
  color: #11a7f3;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
}
.statisticsName {
  position: absolute;
  min-width: 100px;
  left: 127px;
  top: 76px;
}
.boxEcharts {
  position: relative;
  padding: 10px 20px 0;
  margin-top: 25px;
  height: 340px;
}
.statisticsScore {
  position: absolute;
 
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  width: 260px;
}
.statisticsScore > div {
  margin-right: 6px;
  font-size: 14px;
}
.statisticsScore > div:before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 20px;
  background-color: #ffba06;
}
.statisticsScore > div:nth-child(2):before {
  background-color: #02bb96;
}

.statisticsScore > div:nth-child(3):before {
  background-color: #f44336;
}
.statisticsScore > div:nth-child(4):before {
  background-color: #11a7f3;
}

.statisticsScore > div:nth-child(5):before {
  background-color: #4af17c;
}

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.boxright {
  padding-right:5px;
}
.boxrightleft {
  padding-left:12px;padding-right:12px;
}
.boxleft {
  padding-left:5px;
}

@media screen and (min-width: 1050px) {
  .Information {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    min-height: 100px;
  }
}
@media screen and  (max-width: 768px) {
  .boxright {
  padding-left:12px;padding-right:12px;
}
.boxrightleft {
  padding-left:12px;padding-right:12px;
}
.boxleft {
  padding-left:12px;padding-right:12px;
}
  .interval_768 {
    margin: 10px 0;
  }
  .interval_50 {
    width: 50%;
  }
  .interval_160 {
    width: 100%;
  }
  .font-size_14 {
    font-size: 14px;
  }
  .padding_10 {
    padding: 10px;
  }

  .box {
    height: auto;
    padding: 10px 20px 0;
  }
}
</style>
